<template>
  <div>
    <!-- 设备管理首页 -->
    <el-card>
      <div slot="header">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div>
        <el-row :gutter="20"
                class="topLayout"
                type="flex"
                justify="start">
          <div class="inline">
            <span>设备类型</span>
            <div class="flexBox">
              <div @click="changeSearchType(item.name)"
                   v-for="item in typeList"
                   :key="item.name"
                   :class="searchForm.type == item.name ? 'selected' : ''">{{ item.name }}
              </div>
            </div>
          </div>
          <div class="inline">
            <span>设备状态</span>
            <div class="flexBox">
              <div @click="changeSearchState(item.value)"
                   v-for="item in stateList"
                   :key="item.value"
                   :class="searchForm.state == item.value ? 'selected' : ''">{{ item.name }}
              </div>
            </div>
          </div>
          <div class="inline"
               :span="8">
            <el-input v-model="searchForm.search"
                      placeholder="请输入关键字搜索"
                      clearable
                      class="input-search" />
            <el-button type="primary"
                       icon="el-icon-search"
                       @click="getList(true)">搜 索</el-button>
          </div>
        </el-row>
      </div>
    </el-card>
    <el-card class="m-t m-b">
      <div>
        <!-- 操作按钮 -->
        <!--<el-row type="flex"
                justify="start"
                class="m-b">
          <el-button type="primary"
                     icon="el-icon-circle-plus-outline"
                     @click="addDevice">添加</el-button>
          <el-button type="primary"
                     plain
                     icon="el-icon-circle-plus-outline"
                     @click="batchAdd">批量添加</el-button>
        </el-row>-->
        <div style="width:100%">
          <el-table stripe
                    :data="tableData"
                    style="width:100%;"
                    size="small">
            <el-table-column type="index"
                             label="编号"
                             min-width="60"
                             align="center"
                             :index="table_index"></el-table-column>
            <el-table-column prop="deviceId"
                             label="设备ID"
                             min-width="120"
                             sortable />
            <el-table-column prop="name"
                             label="设备名称"
                             min-width="140"
                             sortable />
            <el-table-column prop="type"
                             label="设备类型"
                             min-width="120" />
            <el-table-column prop="state"
                             label="状态"
                             min-width="120">
              <template #default="{ row }">
                <el-tag :type="row.state | stateFilter">{{ row.state | stateFil}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="project.name"
                             label="所属项目"
                             min-width="180"
                             show-overflow-tooltip />
            <el-table-column prop="displayName"
                             label="所有者"
                             min-width="180">
              <template #default="{ row }">
                <div v-if="row.ownerUser">
                {{row.ownerUser.displayName}}({{row.ownerUser.name}})
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="address"
                             label="设备部署地址"
                             min-width="180"
                             show-overflow-tooltip />
            <el-table-column prop="description"
                             label="描述"
                             min-width="180"
                             show-overflow-tooltip />
            <el-table-column prop="createTime"
                             label="创建时间"
                             :formatter="dateFormat"
                             min-width="140" />
            <el-table-column prop="updateTime"
                             label="更新时间"
                             :formatter="dateFormat"
                             min-width="140" />
            <el-table-column label="操作"
                             width="230"
                             fixed="right">
              <template #default="{ row }">
                <el-tag type="primary" @click="detail(row)" title="设备详情">
                  <i class="el-icon-monitor"></i>
                </el-tag>
                <el-tag type="primary" @click="deployDevice(row)" title="部署设备">
                  <i class="el-icon-edit"></i>
                </el-tag>
                <el-tag type="success" @click="user(row)" title="用户列表">
                  <i class="el-icon-user"></i>
                </el-tag>
                <el-tag type="primary" @click="viewData(row)" title="查看数据">
                  <i class="el-icon-view"></i>
                </el-tag>
                <el-tag type="danger" @click="deleteDevice(row)" title="删除设备" v-if="userInfo.role =='ADMIN'">
                  <i class="el-icon-delete"></i>
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pages-btn-box m-t">
          <el-pagination :current-page="page.current"
                         :page-size="Number(page.size)"
                         layout="prev, pager, next, jumper"
                         :total="Number(page.total)"
                         @current-change="handleCurrentChange"
                         v-if="page.total>0" />
        </div>
      </div>
    </el-card>
    <edit-form :show-dialog="showDialogEdit"
               :form-data="formData"
               @changeVisible="changeVisibleEdit"
               @getList="getList" />
    <batch-form :show-dialog="showDialogBatch"
                :form-data="formData"
                @changeVisible="changeVisibleBatch"
                @getList="getList" />
    <detail :deviceId="formData.deviceId"
            :showDialog="showDialogDetail"
            @changeVisible="changeVisibleDetail"
            @getList="getList" />
  </div>
</template>

<script>
import EditForm from "./components/editForm";
import batchForm from "./components/batchForm";
import detail from "./components/detail";
import { formatDate } from "@/utils/utils";
import { search,deleteDevice } from "@/api/deviceManage";
import store from "@/store/modules/user";

export default {
  name: "Index",
  components: {
    EditForm,
    batchForm,
    detail
  },
  data() {
    return {
      tableData: [],
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      formData: {},
      showDialogEdit: false,
      showDialogBatch: false,
      showDialogDetail: false,
      searchForm: {
        type: "",
        state: "",
        search: ""
      },
      typeList: [{ name: "IEQ" }, { name: "PMS" }, { name: "OPT" }, { name: "ROBOT" }],
      stateList: [
        { value: "ONLINE", name: "在线" },
        { value: "OFFLINE", name: "离线" }
        //{ value: "NEW", name: "入库" },
        //{ value: "DEPLOYED", name: "已部署" }
      ],
      userInfo: store.state.userInfo
    };
  },
  filters: {
    stateFil(val) {
      switch (val) {
        case "ONLINE":
          return "在线";
        case "OFFLINE":
          return "离线";
        case "NEW":
          return "入库";
        case "DEPLOYED":
          return "已部署";

        default:
          break;
      }
    },
    stateFilter(state) {
      const stateMap = {
        ONLINE: "success",
        OFFLINE: "danger",
        NEW: "",
        DEPLOYED: "warning"
      };
      return stateMap[state];
    }
  },
  mounted() {
    if (this.$route.query.page) {
      this.page.current = Number(this.$route.query.page);
    }
    if (this.$route.query.search) {

      this.searchForm = JSON.parse(this.$route.query.search);
    }
    this.getList();
  },
  methods: {
    table_index(index) {
      return (this.page.current - 1) * this.page.size + index + 1;
    },
    dateFormat(row, column) {
      if (column.property === "createTime") {
        return formatDate(new Date(row.createTime));
      } else if (column.property === "updateTime") {
        return formatDate(new Date(row.updateTime));
      }
    },
    addDevice() {
      // state.editType = 1;
      this.formData = {};
      this.changeVisibleEdit(true);
    },
    batchAdd() {
      this.formData = {};
      this.changeVisibleBatch(true);
    },
    detail(row) {
      /*this.$router.push({
        path: "/deviceManage/detail",
        query: { deviceId: row.deviceId ,page:this.page.current,search:JSON.stringify(this.searchForm)}
      });*/
      this.formData = row;
      this.changeVisibleDetail(true);
    },
    getList(refresh = false) {
      if (refresh) {
        this.page.current = 1;
        this.page.total = 0;

      }
      var data = {
        ...this.searchForm,
        pageNo: this.page.current,
        pageSize: this.page.size
      };

      search(data).then(res => {
        const data = res.value;
        //console.log(data);
        this.tableData = data.values;
        this.page.total = data.total;
      });
    },
    deployDevice(row) {
      this.$router.push({
        path: "/deviceManage/deployDevice",
        query: { id: row.deviceId, page: this.page.current, search: JSON.stringify(this.searchForm) }
      });
    },
    user(row) {
      this.$router.push({
        path: "/deviceManage/user/index",
        query: { deviceId: row.deviceId, page: this.page.current, search: JSON.stringify(this.searchForm) }
      });
    },
    viewData(row) {
      //console.log(row);
      if (row.type === "IEQ") {
        this.$router.push({
          path: "/deviceManage/IEQViewData",
          query: {
            deviceId: row.deviceId,
            name: row.name,
            page: this.page.current,
            search: JSON.stringify(this.searchForm)
          }
        });
      } else if (row.type === "OPT") {
        this.$router.push({
          path: "/deviceManage/OPTViewData",
          query: {
            deviceId: row.deviceId,
            name: row.name,
            page: this.page.current,
            search: JSON.stringify(this.searchForm)
          }
        });
      } else if (row.type === "PMS") {
        this.$router.push({
          path: "/deviceManage/PMSViewData",
          query: {
            deviceId: row.deviceId,
            name: row.name,
            page: this.page.current,
            search: JSON.stringify(this.searchForm)
          }
        });
      }
    },
    deleteDevice(row) {
      this.$confirm("您确定要删除此设备吗？", "提示", {
        confirmButtonText: " 确 定",
        cancelButtonText: " 取 消",
        type: "warning",
        confirmButtonClass:"el-icon-check",
        cancelButtonClass:"el-icon-close btn-custom-cancel"
      }).then(() => {
        const data = {
          deviceId: row.deviceId
        };
        deleteDevice(data)
          .then((res) => {
            if (res["code"] == 200) {
              this.getList();
              this.$message.success("删除成功!");
            } else {
              this.$message(res["msg"]);
            }
          })
      });
    },
    changeSearchType(value) {
      if (this.searchForm.type == value) {
        this.searchForm.type = "";
      } else {
        this.searchForm.type = value;
      }
      this.getList();
    },
    changeSearchState(value) {
      if (this.searchForm.state == value) {
        this.searchForm.state = "";
      } else {
        this.searchForm.state = value;
      }
      this.getList();
    },
    handleCurrentChange(val) {
      this.page.current = val;
      this.getList();
    },
    changeVisibleEdit(e) {
      this.showDialogEdit = e;
    },
    changeVisibleBatch(e) {
      this.showDialogBatch = e;
    },
    changeVisibleDetail(e) {
      this.showDialogDetail = e;
    }
  }
};
</script>

<style scoped lang="scss">
.topLayout {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.inline {
  // max-width: 300px;
  margin: 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.input-search {
  width: 350px;
  min-width: 200px;
  margin-right: 20px;
}

.el-tag{
  margin-left: 8px;
}

.flexBox {
  display: flex;

  div {
    margin: 0 5px;
    border: 1px solid #aaa;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 5px;
    color: #aaa;
    cursor: pointer;
  }

  .selected {
    background-color: #1890ff;
    color: #fff;
  }
}
</style>
